<template>
  <div>
    <el-row>
      <el-col :span="1" style="margin: 0px 0px 0px 10% ">
        <img src="../img/address.png" width="40" height="40">
      </el-col>
      <h2 style="font-size: 30px;margin: 0px 0px">修改地址</h2>
    </el-row>
    <el-divider></el-divider>
    <el-row style="margin: 20px 0px 0px 180px;">
      <el-col :span="21" >
        <el-card>
          <el-form ref="users"  label-width="80px" :model="users">
            <el-form-item label="ID" v-show="false">
              <el-input v-model="users.id"></el-input>
            </el-form-item>
            <el-form-item label="收货人:" prop="username">
              <el-input v-model.trim="users.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
              <el-input v-model.trim="users.phone"></el-input>
            </el-form-item>
            <el-form-item label="地址:" prop="phone">
              <el-input v-model.trim="users.useraddress"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="$router.back()">返回</el-button>
            </el-form-item>
          </el-form>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import allBuyApi from "@/http/allBuyApi";

export default {
  name: "AllBuy",
  data(){
    return{
      users: {},
      usersForm:{}
    }
  },
  created() {
    this.getEditObj()
  },
  methods:{
    getEditObj() {
      let id = this.$route.params.id;
      console.log("id是："+id);
      if (id) {
        allBuyApi.edit(id).then(res => {
          if (res.data.code == 200) {
            this.users = res.data.data;
          }
        })
      }
    },
    onSubmit(){
      this.$refs['users'].validate((valid) => {
        if (valid) {
          console.log('submit!', this.users);
          allBuyApi.save(this.users).then((res) => {
            console.log("res",res)
            if (res.data.code == 200) {
              this.$router.replace("/allBuy.html")
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;//阻止表单提交
        }
      });

    }
  }
}
</script>

<style scoped>

</style>